<template>
  <div style="display: flex;flex-direction: column;gap: 10px">
    <t-row :gutter="[16, 16]">
      <t-col :xs="12" :xl="6">
        <t-card title="人才性别"  class="dashboard-chart-card">
          <chart-view :chartOption="chartOpt1" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="6">
        <t-card title="人才学位"  class="dashboard-chart-card">
          <chart-view :chartOption="chartOpt2" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
    </t-row>
    <t-row :gutter="[16, 16]">
      <t-col :xs="12" :xl="6">
        <t-card title="人才学历"  class="dashboard-chart-card">
          <chart-view :chartOption="chartOpt3" :autoResize="false" height="326px"/>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="6">
        <t-card title="单位申报排名" class="dashboard-rank-card">
          <t-table hover :data="deptRankData" :columns="deptRankColumns" rowKey="departmentId">
            <template #id="{ rowIndex }">
            <span :class="getRankClass(rowIndex)">
              {{ rowIndex + 1 }}
            </span>
            </template>
          </t-table>
        </t-card>
      </t-col>
    </t-row>
  </div>
</template>

<script lang="jsx">

export default {
  name: "home",
  dicts: ["sf_project_status"],
  components: {
  },
  data() {
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      chartOpt1: {},
      chartOpt2: {},
      chartOpt3: {},
      dialog: {
        open_project_detail: false,
        open_approve_list: false,
        header: "",
        objId: 0
      },
      panelList: [],
      deptRankData: [],
      deptRankColumns: [
        {
          colKey: "id",
          title: "排行",
          align: "center",
        },
        {
          colKey: "deptName",
          title: "单位名称",
          align: "center",
          width: 180
        },
        {
          colKey: "projectCount",
          title: "申报项目个数",
          align: "center",
        },
      ],
      projectData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  created() {
    this.getBySex();
    this.getByDegree();
    this.getByEducation();
    this.getDeptProjectRanking();
  },
  methods: {
    toPath(item) {
      this.$router.push({
        path: item.path,
        query: item.query
      });
    },
    getRankClass(index) {
      return ['dashboard-rank__cell', {'dashboard-rank__cell--top': index < 3}];
    },
    getBySex() {
      this.$api.kjrc.home.getBySex().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt1 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    }, 
    getByDegree() {
      this.$api.kjrc.home.getByDegree().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt2 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    }, 
    getByEducation() {
      this.$api.kjrc.home.getByEducation().then(response => {
        const data = [];
        response.data.forEach(val => {
          data.push({
            ...val,
            name: val.label
          })
        })
        this.chartOpt3 = this.$eChartFn.getPieChart(data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    }, 
    getDeptProjectRanking() {
      this.$api.kjrc.home.getDeptProjectRanking(this.queryParams).then(response => {
        this.deptRankData = response.rows;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  border: 1px solid var(--td-component-border);
  border-radius: var(--td-radius-medium);
  background-color: var(--td-bg-color-container);
  padding: 10px 10px;

  .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 10px;
    position: relative;

    .title {
      font: var(--td-font-title-medium);
      color: var(--td-text-color-primary);
      margin-right: var(--td-comp-margin-l);
      word-break: break-all;
    }
  }
}

@import '@/style/variables.less';
.dashboard-rank-card {
  height: 100%;
}

.dashboard-rank__cell {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  background-color: @gray-color-5;
  align-items: center;
  justify-content: center;
  font-weight: 700;

  &--top {
    background: @brand-color;
  }
}
</style>
